<div class="container">
  <h1>Hero Form</h1>

  {{diagnostic}}
  <div [hidden]="submitted">
    <form #heroForm="ngForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
               [(ngModel)]="model.name" name="name" required #name="ngModel">
        <div [hidden]="name.valid || name.pristine"
             class="alert alert-danger">
          Name is required
        </div>
      </div>

      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text" class="form-control" id="alterEgo"
               [(ngModel)]="model.alterEgo" name="alterEgo" required>
      </div>

      <div class="form-group">
        <label for="power">Hero Power</label>
        <select class="form-control" id="power" required
                [(ngModel)]="model.power" name="power">
          <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
        </select>
      </div>

      <button type="submit" [disabled]="!heroForm.form.valid"
              class="btn btn-success">Submit</button>

      <button type="button" class="btn btn-default"
              (click)="newHero(); heroForm.reset()">New Hero</button>

      <button type="button" class="btn btn-default"
              (click)="testPromise()">Test Promise</button>

      <button type="button" class="btn btn-default"
              (click)="testReject()">Test Reject</button>

      <button type="button" class="btn btn-default"
              (click)="testBreakPromiseChain()">Test Break Promise Chain</button>

    </form>
  </div>

  <div [hidden]="!submitted">
    <h2>You submitted the following:</h2>
    <div class="row">
      <div class="col-xs-3">Name</div>
      <div class="col-xs-9  pull-left">{{ model.name }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Alter Ego</div>
      <div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Power</div>
      <div class="col-xs-9 pull-left">{{ model.power }}</div>
    </div>
    <br>
    <button class="btn btn-primary" (click)="submitted=false">Edit</button>
  </div>
</div>
